<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
       GET  http://www.liulongbin.top:3009/api/get
       POST http://www.liulongbin.top:3009/api/post
  -->
  <script>
    // 目标：发送请求和处理响应

    function myAxios(config) {
      // config 是配置对象 {method, url, params, success}
      console.log('执行了函数', config)

      // 原生ajax代码通过 XMLHttpRequest实现的
      let xhr = new XMLHttpRequest()
      xhr.open(config.method, config.url)
      xhr.send()
      // 获取服务器响应结果
      xhr.addEventListener('load', function () {
        // console.log(xhr.response)

        // 当load事件触发的时候，来执行config对象的success函数
        // 把服务器响应结果xhr.response先转成js对象，在作为success函数的实参传递给了形参result
        config.success(JSON.parse(xhr.response))
      })
    }

    // 使用myAxios发送get请求
    myAxios({
      method: 'get',
      url: 'http://www.liulongbin.top:3009/api/get',
      params: {
        a: 1,
        b: 2
      },
      success: function (result) {
        // success 回调函数，在请求成功的时候回来执行，并且形参result获取到服务器响应结果
        //  替代了then()
        console.log('success 函数执行了吗')

        console.log(result) // js对象  是服务器响应的结果
      }
    })



    // axios().then((result) => {
    //   console.log(result)
    // })

  </script>
</body>

</html>